<template>
  <div class="new" v-loading="loading">
    <div class="title">
      <img src="http://101.37.161.89/wordpress/wp-content/themes/stormy/img/title-1.png" alt="">
    </div>
    <ul>
      <li class="one_new" v-for="yy in number" :key="yy.id">
        <router-link class="one_li" :to="{name:'page',params:{id:yy.id}}">
          <span class="one_class">{{yy.date |capitalize}}</span>  {{yy.title}}
        </router-link>
      </li>
    </ul>
    <div class="title_bottom">
      <router-link to="/information"><img src="http://101.37.161.89/wordpress/wp-content/themes/stormy/img/title-2.png" alt=""></router-link>
    </div>
  </div>
</template>

<script>
    export default {
        name: "new",
      data(){
          return{
            number:'',
            loading:true
          }
      },
    mounted:function () {
      this.over();
    },
    methods:{
      over:function () {
        var that = this;
        axios.get('https://bird.ioliu.cn/v2/?url=http://101.37.161.89/wordpress/?json=1').then(re => {
          that.number = re.data.posts;
          that.loading = false;
        })
      }
    },
    filters:{
      capitalize:function (value) {
        return value.split(" ")[0];
      }
    },
    }
</script>

<style scoped>
  .new{
    background-image: url(http://101.37.161.89/wordpress/wp-content/themes/stormy/img/1_07.jpg);
    padding: 6% 2% 3%;
    overflow: hidden;
    color: #fff;
    height: 610px;
  }
  .one_new {
    display: block;
  }
  .title {
    width: 234px;
    margin: 0 auto;
  }
  .one_li {
    color: #fff;
    text-align: justify;
    text-decoration:none
  }
  .one_new {
    margin: 50px 0;
  }
  .one_class{
    margin-left: -16px;
    margin-right: 20px;
  }
  .title_bottom{
    width: 234px;
    margin: 0 auto;
    margin-top: 50px;
  }


</style>
